<template>
	<u-tabbar v-model="tabberIndex" @change="changeTabber" active-color="#5098FF" height="100"
		:mid-button.sync="midButton" :list="tabberList"></u-tabbar>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'Tabber',
		data() {
			return {}
		},
		methods: {
			...mapMutations(['changeTabberIndex']),
			// 点击导航栏切换
			changeTabber(e) {
				// console.log('当前点击的index', e)
				this.changeTabberIndex(e);
				uni.setStorageSync('tabberIndex', e)
			}
		},
		computed: {
			// 获取导航栏信息
			...mapState({
				tabberList: modules => modules.tabber.tabberList
			}),
			// 从store获取底部导航栏的index，改变值的时候需要set，动态需要get和set(否则console会报错)
			tabberIndex: {
				get() {
					return this.$store.state.tabber.tabberIndex;
				},
				set(e) {
					this.$store.state.tabber.tabberIndex = e;
				}
			}
		}
	};
</script>